<template>
  <div class="p20 bg-white console" v-loading="loading">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-position="right"
      class="form-align-center mt20 overflow pl15 pr15"
    >
      <el-row type="flex" justify="space-around">
        <el-col :span="9" class="mb15 form-inp">
          <el-form-item
            label="所属部门："
            prop="departmentId"
            :label-width="labelWidth"
          >
            <el-select
              placeholder="请选择所属部门"
              @change="handleGetJob"
              v-model="form.departmentId"
            >
              <el-option
                :key="item.id"
                :value="item.id"
                :label="item.name"
                v-for="item in deptList"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9" class="mb15 form-inp">
          <el-form-item
            label="所属岗位："
            prop="jobId"
            :label-width="labelWidth"
          >
            <el-select placeholder="请选择所属岗位" v-model="form.jobId">
              <el-option
                v-for="item in jobList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around">
        <el-col :span="9" class="mb15 form-inp">
          <el-form-item
            label="员工姓名："
            prop="realName"
            :label-width="labelWidth"
            class="required"
          >
            <el-input
              v-model="form.realName"
              autocomplete="off"
              placeholder="请输入员工姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9" class="mb15 form-inp">
          <el-form-item
            label="手机号码："
            prop="phone"
            :label-width="labelWidth"
            class="required"
          >
            <el-input
              type="number"
              v-model="form.phone"
              autocomplete="off"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around">
        <el-col :span="9" class="mb15 form-inp">
          <el-form-item
            label="身份证号码："
            prop="idCard"
            :label-width="labelWidth"
            class="required"
          >
            <el-input
              v-model="form.idCard"
              autocomplete="off"
              placeholder="请输入身份证号码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9" class="mb15">
          <el-form-item label="性别：" prop="sex" :label-width="labelWidth">
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around">
        <el-col :span="9" class="mb15 form-inp">
          <el-form-item
            label="职业证件类型："
            prop="professionalDocumentType"
            :label-width="labelWidth"
          >
            <el-select
              placeholder="请选择职业证件类型"
              v-model="form.professionalDocumentType"
            >
              <el-option
                :key="item.number"
                :label="item.name"
                :value="item.number"
                v-for="item in professionalDocumentTypeList"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9" class="mb15 form-inp">
          <el-form-item
            label="职业证件号码："
            prop="professionalDocumentCode"
            :label-width="labelWidth"
          >
            <el-input
              autocomplete="off"
              placeholder="请输入职业证件号码"
              v-model="form.professionalDocumentCode"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around">
        <el-col :span="9" class="mb15 form-inp">
          <el-form-item
            label="职称等级："
            prop="titleLevelType"
            :label-width="labelWidth"
          >
            <el-select
              placeholder="请选择职称等级"
              v-model="form.titleLevelType"
            >
              <el-option
                :key="item.number"
                :label="item.name"
                :value="item.number"
                v-for="item in titleLevelTypeList"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9" class="mb15 form-inp">
          <el-form-item
            label="学历："
            prop="educationType"
            :label-width="labelWidth"
          >
            <el-select placeholder="请选择学历" v-model="form.educationType">
              <el-option
                :key="item.number"
                :label="item.name"
                :value="item.number"
                v-for="item in educationTypeList"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around">
        <el-col :span="9" class="mb15 form-inp">
          <el-form-item
            label="入职日期："
            prop="joinDate"
            :label-width="labelWidth"
          >
            <el-date-picker
              type="date"
              v-model="form.joinDate"
              value-format="yyyy-MM-dd"
              placeholder="选择入职日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="9" class="mb15">
          <el-form-item
            label="员工照片："
            :label-width="labelWidth"
            class="required"
          >
            <Thumbnail
              @deleteUserAvatar="handleDeleteUserAvatar"
              :photos="photoArr"
            ></Thumbnail>
            <ImageUpload
              :pegs="pegs"
              :limit="limit"
              :imageMaxSize="imageMaxSize"
              @uploadFiles="handleUploadFiles"
            ></ImageUpload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around" class="mt20 pt20">
        <el-col :span="12" class="mb15">
          <el-form-item>
            <GoBack />
            <el-button
              style="width: 120px;"
              class="theme-btn"
              @click="handleEdit"
              >提 交</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  getAllDept,
  getJobByDept,
  getInnerUser,
  editInnerUser
} from "@/apis/user";
import { mapGetters } from "vuex";
import GoBack from "@/components/go_back";
import setting from "@/../config/setting";
import Thumbnail from "@/components/thumbnail";
import ImageUpload from "@/components/image_upload";
import { getAllDictionary } from "@/apis/dictionary";
import { vPhone, vName, vlength, vIdCard } from "@/utils/verification.js";

export default {
  name: "Edit_user",
  data() {
    return {
      form: {
        sex: "",
        jobId: "",
        phone: "",
        idCard: "",
        realName: "",
        joinDate: "",
        departmentId: "",
        educationType: "",
        titleLevelType: "",
        professionalDocumentType: "",
        professionalDocumentCode: ""
      },
      pegs: [],
      limit: 1,
      jobList: [],
      photoArr: [],
      deptList: [],
      imageMaxSize: 1024,
      uploadFileList: [],
      labelWidth: "130px",
      educationTypeList: [],
      titleLevelTypeList: [],
      professionalDocumentTypeList: [],
      rules: {
        departmentId: {
          required: true,
          message: "请选择所属部门",
          trigger: "blur"
        },
        jobId: {
          required: true,
          message: "请选择所属岗位",
          trigger: "blur"
        },
        realName: {
          validator: vName(2, 8, "请输入员工姓名"),
          trigger: "blur"
        },
        phone: {
          validator: vPhone,
          trigger: "blur"
        },
        idCard: {
          validator: vIdCard,
          trigger: "blur"
        },
        sex: {
          required: true,
          message: "请选择性别",
          trigger: "blur"
        },
        educationType: {
          required: true,
          message: "请选择民族",
          trigger: "blur"
        },
        joinDate: {
          required: true,
          message: "请选择入职日期",
          trigger: "blur"
        }
      }
    };
  },
  computed: {
    ...mapGetters(["loading"])
  },
  created() {
    this.getEditUser();
    this.getEducationTypes();
    this.getTitleLevelTypes();
    this.getProfessionalDocumentTypes();
    this.getDepts(1);
  },
  methods: {
    handleUploadFiles(props) {
      this.uploadFileList = props;
    },
    handleDeleteUserAvatar(delUrl) {
      this.photoArr.forEach((item, index) => {
        if (item === delUrl) {
          this.photoArr[index] = `D${item}`;
          this.pegs = this.pegs.filter(item => item !== delUrl);
        }
      });
    },
    getEditUser() {
      getInnerUser({
        internalUserId: this.$route.query.id
      }).then(data => {
        this.form = data.object;
        this.photoArr = this.form.photo.split();
        this.pegs = JSON.parse(JSON.stringify(this.photoArr));
        this.mountedGetJob();
      });
    },
    handleEdit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const formData = new FormData();
          const file = this.uploadFileList[0];

          if (!this.uploadFileList.length && !this.pegs.length) {
            return this.$notify.error({
              title: "错误",
              message: "请上传员工照片！"
            });
          }

          if (file) {
            formData.append("file", file.raw);
          }

          formData.append(
            "professionalDocumentType",
            this.form.professionalDocumentType
              ? this.form.professionalDocumentType
              : ""
          );

          formData.append(
            "professionalDocumentCode",
            this.form.professionalDocumentCode
          );

          formData.append("id", this.form.id);
          formData.append("sex", this.form.sex);
          formData.append("jobId", this.form.jobId);
          formData.append("phone", this.form.phone);
          formData.append("idCard", this.form.idCard);
          formData.append("realName", this.form.realName);
          formData.append("joinDate", this.form.joinDate);
          formData.append("photo", this.photoArr.join(","));
          formData.append("departmentId", this.form.departmentId);
          formData.append("educationType", this.form.educationType);
          formData.append(
            "titleLevelType",
            this.form.titleLevelType ? this.form.titleLevelType : ""
          );
 
          this.$store.dispatch("load/setLoading", true);
          // editInnerUser(formData).then(res => {
          //   if (res && +res.code === 200) {
          //     this.$message({
          //       type: "success",
          //       message: res.msg
          //     });
          //     this.$router.go(-1);
          //   }
          // });
          this.$message({
            type: "success",
            message: "操作成功！"
          });
          this.$router.go(-1);
        }
      });
    },
    async getTitleLevelTypes() {
      const { rows } = await getAllDictionary({
        fieldName: "titleLevelType"
      });

      this.titleLevelTypeList = rows;
    },
    async getEducationTypes() {
      const { rows } = await getAllDictionary({
        fieldName: "educationType"
      });

      this.educationTypeList = rows;
    },
    async getProfessionalDocumentTypes() {
      const { rows } = await getAllDictionary({
        fieldName: "professionalDocumentType"
      });

      this.professionalDocumentTypeList = rows;
    },
    async getDepts(propertyId) {
      const { rows } = await getAllDept({ propertyId });

      this.deptList = rows;
    },
    async handleGetJob() {
      this.jobList = [];
      this.form.jobId = "";
      const { rows } = await getJobByDept({
        departmentId: this.form.departmentId
      });

      this.jobList = rows;
    },
    async mountedGetJob() {
      this.jobList = [];
      const { rows } = await getJobByDept({
        departmentId: this.form.departmentId
      });

      this.jobList = rows;
    }
  },
  components: {
    GoBack,
    Thumbnail,
    ImageUpload
  }
};
</script>

<style scoped lang="less"></style>
